import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class LR extends Component {    
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          isModalOpen: false,
          ChartTitle:'',
          file: null,
          DataList:[],
          Xtitle:[],
          styles :{
            backgroundImage: 'url(/img/Bar.png)',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            width: '100%',
            height: '100vh'
          }
        };
        this.normFile = this.normFile.bind(this);
        this.onFinish = this.onFinish.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }
    
      showModal = () => {
        this.setState({
          isModalOpen: true,
        });
      };
      handleOk = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleCancel = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleChange = (e) => {
        this.setState({
          ChartTitle: e.target.value,
        });
      }
      normFile = (e) => {
        console.log('Upload event:', e);
        const File = e.file;
        this.setState({ file: File });
      }
      onFinish = (values) => {
        this.setState({
          isModalOpen: false,
        });
        this.initChart();
      }
    initChart = () => {
        const { ChartTitle ,DataList } = this.state;
        this.setState({
            DataList:[],
          });
        var chartDom = document.getElementById('LRChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.regression);
        fetch('./example/example-line.xlsx')
        .then(res =>res.text())
        .then(data => {
            const rows = data.split('\n');
            rows.map((row, index) => {
                const cells = row.split('\t');
                if(cells==''){return;}
                this.setState({
                    DataList :[...this.state.DataList,cells]
                })
            })
            this.state.DataList.shift();
        const data1 = [
        [0.067732, 3.176513],
        [0.42781, 3.816464],
        [0.995731, 4.550095],
        [0.738336, 4.256571],
        [0.981083, 4.560815],
        [0.526171, 3.929515],
        [0.378887, 3.52617],
        [0.033859, 3.156393],
        [0.132791, 3.110301],
        [0.138306, 3.149813],
        [0.247809, 3.476346],
        [0.64827, 4.119688],
        [0.731209, 4.282233],
        [0.236833, 3.486582],
        [0.969788, 4.655492],
        [0.607492, 3.965162],
        [0.358622, 3.5149],
        [0.147846, 3.125947],
        [0.63782, 4.094115],
        [0.230372, 3.476039],
        [0.070237, 3.21061],
        [0.067154, 3.190612],
        [0.925577, 4.631504],
        [0.717733, 4.29589],
        [0.015371, 3.085028],
        [0.33507, 3.44808],
        [0.040486, 3.16744],
        [0.212575, 3.364266],
        [0.617218, 3.993482],
        [0.541196, 3.891471],
        [0.045353, 3.143259],
        [0.126762, 3.114204],
        [0.556486, 3.851484],
        [0.901144, 4.621899],
        [0.958476, 4.580768],
        [0.274561, 3.620992],
        [0.394396, 3.580501],
        [0.87248, 4.618706],
        [0.409932, 3.676867],
        [0.908969, 4.641845],
        [0.166819, 3.175939],
        [0.665016, 4.26498],
        [0.263727, 3.558448],
        [0.231214, 3.436632],
        [0.552928, 3.831052],
        [0.047744, 3.182853],
        [0.365746, 3.498906],
        [0.495002, 3.946833],
        [0.493466, 3.900583],
        [0.792101, 4.238522],
        [0.76966, 4.23308],
        [0.251821, 3.521557],
        [0.181951, 3.203344],
        [0.808177, 4.278105],
        [0.334116, 3.555705],
        [0.33863, 3.502661],
        [0.452584, 3.859776],
        [0.69477, 4.275956],       
        ];
        var option = {
        dataset: [
            {
            source: data1
            },
            {
            transform: {
                type: 'ecStat:regression'
            }
            }
        ],
        title: {
            text: ChartTitle,           
            left: 'center'
        },
        legend: {
            bottom: 5
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            }
        },
        xAxis: {
            splitLine: {
            lineStyle: {
                type: 'dashed'
            }
            }
        },
        yAxis: {
            splitLine: {
            lineStyle: {
                type: 'dashed'
            }
            }
        },
        series: [
            {
            name: 'scatter',
            type: 'scatter'
            },
            {
            name: 'line',
            type: 'line',
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: 'circle',
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 }
            }
        ]
        };
        this.myChart.setOption(option);
    });
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {

        const { isModalOpen ,loading } = this.state;
          return (
              <>
                <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
                <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
                cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
                okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
                >
                <Spin spinning={loading}>  
                <Form onSubmit={this.handleSubmit}
                      name="validate_other"
                      {...formItemLayout}
                      onFinish={this.onFinish}
                      style={{
                        maxWidth: 600,
                      }}
                    >
                      <Form.Item label="Title">
                        <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                      </Form.Item>
                      <Form.Item label="Dragger">
                        <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                         <Upload.Dragger name="files"  action="/upload.do" >
                            <p className="ant-upload-drag-icon">
                              <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                          </Upload.Dragger>
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="Example File">
                        <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                        </Form.Item>
                      <Form.Item
                        wrapperCol={{
                          span: 12,
                          offset: 6,
                        }}
                      >
                        <Button type="primary" htmlType="submit" >
                          Submit
                        </Button>
                      </Form.Item>
                  </Form></Spin>
                </Modal>
            <div className='w100 h100' id='LRChart'></div>
              </>
        )
    }
}
